<template>
	<view class="container">
		<scroll-view class="scroll" scroll-y="true" @scrolltolower='lower' refresher-enabled refresher-threshold="45" :refresher-triggered="refresherTriggered" @refresherrefresh='refresherrefresh'>
			<view class="list" v-if="list.length!=0">
				<view class="item" v-for="item in list" :key="item.id" @tap="btn(item.userId)">
					<image :src="item.user.avatar" mode=""></image>
					<view>
						<view class="name">{{item.user.nickName}}</view>
						<view class="introduce xjs-line-two">{{item.user.petsitterIntroduce}}</view>
					</view>
				</view>
			</view>
			<loadMore v-else :status="'empty'" />
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import api from '@/api'
import { onShow,onLoad } from '@dcloudio/uni-app'
// const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')

onLoad(async (e) => {
	studioId.value = e.studioGoodsId
	await getDetails()
})
const studioId = ref<number>(0)  //工作室id
const page = ref<number>(1)
const flay = ref<boolean>(true)
const list = ref<listType[]>([])
//获取详情
const getDetails = async() =>{
	const res:any = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/teamPage`,
		data:{
			page:page.value,
			limit:10,
			studioId:studioId.value
		}
	})
	if(res){
		list.value = page.value==1? res.data.records:list.value.concat(res.data.records)
		flay.value = list.value.length>=res.data.total?false:true
	}
}

//跳转陪宠师主页
const btn = (id:string)=>{
	uni.navigateTo({
		url: '/pages/studio/petCompanionTeacherIndex/index?userId=' + id + '&studioId=' + studioId.value
	})
}

const refresherTriggered = ref<boolean>(false)
//下拉刷新
const refresherrefresh = () =>{
	refresherTriggered.value = true
	page.value = 1
	getDetails()
	setTimeout(()=>{
		refresherTriggered.value = false
	},2000)
}
//滚动到底事件
const lower = () =>{
	if(!flay.value) return
	page.value++
	getDetails()
}

interface listType {
	id:number
	nickName:string
	avatar:string
	user:any
	petsitterIntroduce:string
}

</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	line-height: 1;
	background-color: #fff;
	.scroll{
		width: 100%;
		height: 100vh;
		padding:0 24rpx;
		box-sizing: border-box;
		background-color: #F9F6F6;
		.list{
			padding:32rpx 0 60rpx;
		}
	}
	.item{
		width: 100%;
		margin-bottom: 24rpx;
		padding:32rpx 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		@include flex(center);
		image{
			width: 136rpx;
			height: 136rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		>view{
			width: calc(100% - 160rpx);
		}
		.name{
			color: #1B2120;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 48rpx;
			margin-bottom: 24rpx;
		}
		.introduce{
			width: 100%;
			color: #7C807F;
			font-size: 26rpx;
			line-height: 36rpx;
		}
	}
}
.nodata{
	width: 600rpx;
	height: 496rpx;
	display: block;
	margin: 60rpx auto 0;
}
</style>
